import { Form, Input, Modal, Select } from 'antd';
import { useEffect, useState } from 'react';
import InputDate from './InputDate';

const { TextArea } = Input

const UpdateExamination = ({ open, onCreate, onCancel, classrooms, curriculum, classes, updateData }) => {
  const [form] = Form.useForm();
  const [startTime, setStartTime] = useState()
  const [endTime, setEndTime] = useState()

  useEffect(() => {
    if (updateData !== undefined) {
      setStartTime(new Date(updateData.fd_startTime))
      setEndTime(new Date(updateData.fd_endTime))
    }
  }, [updateData])

  const updateItems = [
    { name: "fd_curriculumNum", label: "课程", rules: {}, offset: 1, options: curriculum },
    { name: "fd_classroomNum", label: "地点", rules: {}, offset: 1, options: classrooms },
    { name: "fd_claNum", label: "班级", rules: {}, offset: 1, options: classes },
    { name: "fd_startTime", label: "开始时间", rules: { must: { required: true, message: 'Please input the Email of collection!', }, }, offset: 1, },
    { name: "fd_endTime", label: "结束时间", rules: { must: { required: true, message: 'Please input the Email of collection!', }, }, offset: 1, },
    { name: "fd_remark", label: "备注", rules: {}, offset: 1, },
  ]


  return (
    <Modal
      destroyOnClose
      width={511}
      open={open}
      okText="提交"
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            const newUpdateData = { ...values, "fd_startTime": `${startTime}`, "fd_endTime": `${endTime}` }
            onCreate(newUpdateData);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        preserve={false}
        form={form}
        layout="horizontal"
        name="form_in_modal"
        wrapperCol={{
          span: 12,
        }}
        className="updata-user-infor"
      >
        {
          updateItems.map((item) => {
            return (
              <Form.Item
                labelAlign='left'
                key={item.name}
                name={item.name}
                label={item.label}
                rules={[item.rules?.must]}
                labelCol={{
                  offset: 1,
                  span: 5
                }}
                wrapperCol={{
                  span: 17,
                  offset: 0
                }}
                initialValue={updateData?.[item.name]}
              >
                {
                  item.name === "fd_startTime" ? <InputDate setTime={setStartTime} /> :
                    item.name === "fd_endTime" ? <InputDate setTime={setEndTime} /> :
                      item.name === "fd_remark" ? <TextArea rows={4} className="remark" /> :
                        <Select
                          showSearch
                          filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                          }
                          disabled
                          listHeight={90}
                          style={{ width: 160 }}
                          key="value"
                          options={item.options}
                        />
                }
              </Form.Item>
            )
          })
        }
      </Form>
    </Modal>
  );
};
export default UpdateExamination